<template>
	<view class="content">
		<!-- 顶部标签组件 -->
		<view class="safeContent">
			<topCom>{{title}}</topCom>
		</view>
		<van-tabs v-model:active="active"  title-inactive-color="#B8B8B9" title-active-color="#fff"
			line-width="0" background="#121317">
			<van-tab>
				<template #title>KOI</template>
				<capKoi>
				</capKoi>
			</van-tab>
			<van-tab>
				<template #title>USDT</template>
				<capUsdt/>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script lang="ts" setup>
	import topCom from '../topCom/index.vue';
	import capKoi from '../capitalKoi/index.vue';
	import capUsdt from '../capitalUsdt/index.vue';
	import { ref } from 'vue';
	const active = ref(0);
	const title = ref('资金账户')
	// // const aa = (active : number) => {
	// // 	console.log(123, active)
	// // }
	// const beforeChange = (index) => {
	// 	// console.log(active)
	// 	// 返回 false 表示阻止此次切换
	// 	if (index === 1) {
	// 		return false;
	// 	}
	// 	// 返回 Promise 来执行异步逻辑
	// 	return new Promise((resolve) => {
	// 		// 在 resolve 函数中返回 true 或 false
	// 		resolve(index !== 3);
	// 	});
	// };
</script>

<style lang="scss">
	.conent{
		// min-height: 100vh;
		// overflow-y: auto;
	}
	::v-deep.van-tabs__line {
		// background-color: transparent;
	}

	::v-deep.van-tabs__nav.van-tabs__nav--line {
		width: 200px;
		margin: 0 auto;
		height: 64px;
	}

	::v-deep span.van-tab__text.van-tab__text--ellipsis {
		font-size: 32px;
		height: 64px;
		line-height: 64px;
	}

	::v-deep.van-tab {
		width: 160px;
	}

	::v-deep.van-tabs__wrap {
		height: 88px;
	}

	::v-deep.van-tabs--line .van-tabs__wrap {
		height: auto;
	}

	// tabs切换样式
	::v-deep.van-tabs__nav.van-tabs__nav--line {
		border: 1px solid #707173;
		border-radius: 50px;
		padding: 0;
		margin-top: 30px;
		width: 360px;
	}

	::v-deep.van-tab--active {
		border: 1px solid #fff;
		border-radius: 50px;
	}

	::v-deep.van-tabs__content {
		color: #fff;
	}
	.content{
		min-height: 100vh;
	}
</style>